<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户资料</title>
    <jsp:include page="../head.jsp"></jsp:include>

    <style>

        .msg>div{
            margin: 20px 10px;
        }

        .tx{
            padding: 15px;
            text-align: center;
        }

        .tx img{
            transform:scale(0.6);
        }
        .tx p{
            font-size: 16px;
        }
        .info li{
            padding: 5px 20px;
            display: flex;
            align-items: center;
        }
        .info span{
            margin-left: 5px;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row msg">
        <div class="layui-col-md3">
            <div  class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body">
                    <div class="tx">
                        <img class="txImg" src="/static/img/tx_boy.png" alt="">
                        <p class="nor-text username">水电费</p>
                    </div>
                    <ul class="info nor-text">
                        <li class="phone">
                            <i class="layui-icon layui-icon-cellphone" style="font-size: 20px;"></i>
                            <span></span>
                        </li>
                        <li class="email">
                            <i class="layui-icon layui-icon-email" style="font-size: 20px;"></i>
                            <span></span>
                        </li>
                        <li class="dept">
                            <i class="layui-icon layui-icon-app" style="font-size: 20px;"></i>
                            <span></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div  class="layui-card">
                <div class="layui-card-header">详细信息</div>
                <div class="layui-card-body">
                    <form class="layui-form userForm" action="" lay-filter="userInfo">
                        <input type="hidden" name="id">
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required|username" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" required lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="email" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门</label>
                            <div class="layui-input-block">
                                <input type="text" name="deptName" readonly  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男">
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="updateUser">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        init();

        //监听提交
        form.on('submit(updateUser)', function(data){
            console.log(data.field)
            $.ajax({
                type: "POST",
                url:'/user/profile/update',
                data:data.field,
                dataType:'json',
                success:function (res) {
                    if(res.code == 200){
                        init();
                        window.parent.setUserInfo(res.data)
                        layer.msg('修改成功', {icon: 6,time:1000});
                    }else{
                        layer.msg(res.msg, {icon: 5,time:1000});
                    }
                }
            })
            return false;
        });

        form.verify({
            username: function(value, item){
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '昵称不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '昵称首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '昵称不能全为数字';
                }
                if(value.length <= 1){
                    return '昵称长度至少2个字符';
                }
            }

            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        function init() {
            $.get("/user/getInfo", function (res) {
                if (res.code == 200) {
                    var user = res.data;
                    var menus = user.menus;

                    // 用户名字、头像
                    $(".username").text(user.name)
                    if(user.sex == '男'){
                        $('.txImg').attr('src','/static/img/tx_boy.png');
                    }else{
                        $('.txImg').attr('src','/static/img/tx_girl.png');
                    }
                    $('.email span').text(user.email)
                    $('.phone span').text(user.phone)
                    $('.dept span').text(user.deptName)

                    form.val("userInfo",{
                        "id":user.id,
                        "name":user.name,
                        "phone":user.phone,
                        "email":user.email,
                        "sex":user.sex,
                        "deptName":user.deptName
                    })
                    // $('.userForm input[name="id"]').val(user.id)
                    // $('.userForm input[name="name"]').val(user.name)
                    // $('.userForm input[name="password"]').val(user.password)
                    // $('.userForm input[name="phone"]').val(user.phone)
                    // $('.userForm input[name="email"]').val(user.email)
                    // $('.userForm input[type=radio][name="sex"][value="'+user.sex+'"]').attr("checked",true);
                    form.render()
                }
            })
        }
    })

</script>
</body>
</html>
